<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分类</title>
    <script src="asserts/plugins/jquery/jquery-3.6.0.min.js"></script>
    <script src="asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <link href="asserts/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script>
        $(document).ready(function () {
            fetchGoodsTypes();

            $('#search').on('click', function () {
                var level = $('input[name="level"]').val();
                var name = $('input[name="name"]').val();

                if (level && name) {
                    searchGoodsTypes(level, name);
                } else if (level) {
                    searchGoodsTypesByLevel(level);
                } else if (name) {
                    searchGoodsTypesByName(name);
                } else {
                    fetchGoodsTypes();
                }
            });
        });

        function fetchGoodsTypes() {
            $.ajax({
                url: '/admin/GoodsTypeController',
                data: {
                    type: 'showGoodsTypes'
                },
                method: 'GET',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("页面加载失败");
                    } else {
                        renderGoodsTypes(respResult.data);
                    }
                }
            });
        }

        function searchGoodsTypes(level, name) {
            $.ajax({
                url: '/admin/GoodsTypeController',
                data: {
                    type: 'searchGoodsTypes',
                    level: level,
                    name: name
                },
                method: 'GET',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("搜索失败");
                    } else {
                        renderGoodsTypes(respResult.data);
                    }
                }
            });
        }

        function searchGoodsTypesByLevel(level) {
            $.ajax({
                url: '/admin/GoodsTypeController',
                data: {
                    type: 'searchGoodsTypesByLevel',
                    level: level
                },
                method: 'GET',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("搜索失败");
                    } else {
                        renderGoodsTypes(respResult.data);
                    }
                }
            });
        }

        function searchGoodsTypesByName(name) {
            $.ajax({
                url: '/admin/GoodsTypeController',
                data: {
                    type: 'searchGoodsTypesByName',
                    name: name
                },
                method: 'GET',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("搜索失败");
                    } else {
                        renderGoodsTypes(respResult.data);
                    }
                }
            });
        }

        function renderGoodsTypes(data) {
            let tr = '';
            for (let i = 0; i < data.length; i++) {
                tr += "<tr><td>" + data[i].tId + "</td>" +
                    "<td>" + data[i].tName + "</td>" +
                    "<td>" + data[i].tLevel + "</td>" +
                    "<td>" + data[i].tBelongType + "</td>" +
                    "<td>" +
                    "<button onclick='updateGoodsType(" + data[i].tId + ")'>修改</button>&nbsp;&nbsp;" +
                    "<button onclick='deleteGoodsType(" + data[i].tId + ")'>删除</button>" +
                    "</td>" +
                    "</tr>";
            }
            $('#tb_list tbody').html(tr);
        }

        function deleteGoodsType(typeId) {
            $.ajax({
                url: '/admin/GoodsTypeController',
                data: {
                    type: 'deleteGoodsClass',
                    typeId: typeId
                },
                method: 'POST',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("删除失败");
                    } else {
                        alert("删除成功");
                        fetchGoodsTypes();
                    }
                }
            });
        }

        function updateGoodsType(typeId) {
            // 打开一个模态框或新页面让用户输入新的信息
            let newName = prompt("请输入新的商品类型名称:");
            let newLevel = prompt("请输入新的商品类型等级:");
            let newBelongType = prompt("请输入新的所属类型:");

            if (newName && newLevel && newBelongType) {
                $.ajax({
                    url: '/admin/GoodsTypeController',
                    data: {
                        type: 'updateGoodsClass',
                        typeId: typeId,
                        name: newName,
                        level: newLevel,
                        belongType: newBelongType
                    },
                    method: 'POST',
                    dataType: 'json',
                    success: function (respResult) {
                        if (respResult.status === 500) {
                            alert("更新失败");
                        } else {
                            alert("更新成功");
                            fetchGoodsTypes();
                        }
                    }
                });
            } else {
                alert("所有字段都是必需的！");
            }
        }
    </script>
</head>
<body>
<div class="row" style="width:98%;margin-left: 1%;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                商品类型
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>商品等级</span>
                            <input type="text" name="level" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>商品名称</span>
                            <input type="text" name="name" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-primary" id="search"><span class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>
                <div style="height: 400px;overflow: scroll;">
                    <table id="tb_list" class="table table-striped table-hover table-bordered">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>类型</th>
                            <th>等级</th>
                            <th>所属类型</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

